<template>
  <header>
    <section class="head-main clearfix">
      <h1 class="fl"><router-link class="fl" to="/">羽戈科技</router-link></h1>
      <nav class="navs">
        <router-link tag="span" to="/" class="nav-item">首页</router-link>
        <span class="pos-rel nav-item">
          <span>产品</span>
          <ul class="pos">
            <router-link tag="li" to="/product" class="line">教练机1.0</router-link>
            <router-link tag="li" to="/saas">SaaS服务</router-link>
          </ul>
        </span>
        <span class="pos-rel nav-item">
          <span>解决方案</span>
          <ul class="pos solve-pos">
            <li>体育培训</li>
          </ul>
        </span>
        <!-- <router-link tag="span" to="/" class="pos-rel nav-item">
          <span>咨询服务</span>
          <ul class="pos ai-pos">
            <li>人工智能战略规划</li>
          </ul>
        </router-link> -->
        <span class="pos-rel nav-item">
          <span>支持</span>
          <ul class="pos">
            <li class="line" @click="toDoc">文档</li>
            <li>建模样例</li>
          </ul>
        </span>
        <router-link tag="span" to="/" class="nav-item">关于我们</router-link>
        <router-link tag="span" to="/news" class="nav-item">新闻中心</router-link>
      </nav>
    </section>
  </header>
</template>
<script>
export default {
  methods:{
    toDoc(){
      window.location = this.ADDRLINK;
    }
  }
}
</script>
<style scoped>
header{
  position: fixed;
  z-index:9999;
  width:100%;
  height:50px;
  background-color: rgba(0,0,0,.6)
}
.head-main{
  width:1200px;
  height:50px;
  margin:0 auto;
  display: flex;
}
h1{
  margin-right:94px;
  background: url('../../assets/image/ygLogo.png') no-repeat 0 8px;
}
h1 a{
  width:190px;
  height:50px;
  text-indent: -999px;
}
.navs{
  display: flex;
}
.navs .nav-item{
  cursor: pointer;
  color:#fff;
  height:50px;
  font-size: 16px;
  line-height: 50px;
  margin-left:80px;
}
.pos{
  text-align: center;
  transition: .3s;
  position: absolute;
  top:50px;
  left:-36px;
  width:72px;
  padding:0 24px;
  line-height: 35px;
  background-color: rgba(0,0,0,.5);
  border-radius: 5px;
  height:0px;
  overflow: hidden;
}
.ai-pos{
  width:130px;
  left:-50px;
}
.solve-pos{
  left:-22px;
}
.pos-rel:hover .pos{
  height:70px;
}
.pos-rel:hover .solve-pos,.pos-rel:hover .ai-pos{
  height:35px;
}
.line{
  border-bottom:1px solid #3e535e;
}
</style>

